<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面加载动画</title>
		<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js" ></script>
		<style>
			body img{ width: 100%; height: auto;}
			.load{ width: 100%; height: 100%; position: fixed;top: 0; left: 0;z-index: 99; background: #FFFFFF;}
			.load .plc{position: absolute;width: 496px; height: 372px; top: 0;bottom: 0; left: 0;  right: 0;  background: url(img/loading.gif)no-repeat; margin:auto;}
		</style>
	</head>
	<body>
		<div>
			<img src="http://pic1.win4000.com/wallpaper/4/51f9cae7079f1.jpg"/>
			<img src="http://bbs.crsky.com/1236983883/Mon_1312/25_184488_a6575fc2b3e50ec.jpg"/>
			<img src="http://bbs.static.coloros.com/data/attachment/forum/201501/10/235559f5plyglg7neog9eg.jpg"/>
			<img src="http://img.zcool.cn/community/038ef7958452b64a801219c775c63cd.jpg"/>
			<img src="http://imga.mumayi.com/android/img_mumayi/2015/12/11/104/1047925/nologo/nologo_pic_1047925_1491bc.png"/>
		</div>
		<script>
			load = '<div class="load"><div class="plc"></div></div>';
			$("body").append(load)
			document.onreadystatechange=function(){
				console.log(document.readyState);
				if(document.readyState=="complete"){
					$(".load").fadeOut();
				}
			}
		</script>
	</body>
</html>
